{extend name="public/base" /}

{block name="style"}
<style>
    .profile-avatar-container {
        position:relative;
        width:6rem;
        margin: -5rem auto 1rem;
    }
    .profile-avatar-container .profile-user-img{
        width: 6rem;
        height: 6rem;
        margin: 0 auto;
        border-radius: 50%;
        object-fit: cover;
    }
    .profile-avatar-container input {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 6rem;
        height: 6rem;
        opacity: 0;
    }
</style>
{/block}
{block name="content"}
<div class="container my-3 my-md-4">
    <div class="row">
        <div class="col-lg-4">
            {include file="public/sidenav" /}
        </div>
        <div class="col-lg-8 mt-3 mt-lg-0">
            <div class="card card-profile">
                <div class="card-header" style="background-image: url('__STATIC__/images/user-header-bg.jpg')"></div>
                <div class="card-body text-center">

                    <form id="profile-avatar-form">
                        <input type="hidden" name="id" id="{$info.id}">
                        <div class="profile-avatar-container">
                            <input type="file" name="avatar" id="chooseFile" accept="image/png,image/jpeg,image/gif">
                            <img class="profile-user-img" id="profile-user-img" src=
                                    {if $info.avatar !=""}
                                    "/uploads/avatar/{$info.avatar}"
                                    {else /}
                                    "__STATIC__/images/avatar.png"
                                    {/if}
                            alt="">
                        </div>
                    </form>

                    <h3 class="mb-3">{$info.username}</h3>
                    <p class="mb-4">{$info.email}</p>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script>

    toastr.options = {
        "closeButton": true,
        "positionClass": "toast-top-center",
        "timeOut": "1500"
    };

    $('#chooseFile').on('change',function () {

        var form = document.querySelector('#profile-avatar-form');
        var formdata = new FormData(form);

        $.ajax({
            type: 'post',
            url: "{:url('User/changeAvatar',['id'=>$info.id])}",
            processData: false,     // 不要处理发送的数据
            contentType: false,     // 不要设置Content-Type请求头
            data: formdata,
            dataType: 'json',
            success: function (data) {
                switch (data.status) {
                    case 1:
                        $('#profile-user-img').attr('src','/uploads/avatar/' + data.img);
                        toastr.success(data.message);
                        break;
                    case -1:
                    case 0:
                    case -2:
                        toastr.warning(data.message);
                        break;
                }
            }
        })
    })
</script>
{/block}